<template>
    <div>
        <div class="px-35px bg-#3f3f3f overflow-hidden">
            <div class="form-item">
                <div class="label">
                    当前密码
                </div>
                <nut-input v-model="val" placeholder="输入您目前的密码"></nut-input>
            </div>

            <div class="form-item">
                <div class="label">
                    新密码
                </div>
                <nut-input v-model="val" placeholder="输入新密码（至少6个字元）"></nut-input>
            </div>
            <div class="form-item">
                <div class="label">
                    确认新密码
                </div>
                <nut-input v-model="val" placeholder="重新输入您的新密码"></nut-input>
            </div>

            <nut-button class="!w-full bg-#ffffff !text-#000 font-bold !mt-150px !mb-20px">
                变更密码
            </nut-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref } from 'vue'
const val = ref('')
</script>

<style scoped lang="scss">
.item-icon {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 3px;

    &.icon1 {
        background: url('../../../assets/user-1.png') no-repeat center;
        background-size: contain;
    }
}

.form-item {
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;

    .label {
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }



    :deep(.nut-radio) {
        margin-bottom: 0 !important;

        .nut-radio__label {
            color: #fff;
        }

        .nut-radio__icon {
            color: #e557c5;
        }
    }

    .error-message {
        color: #ff7979;
        font-size: 9px;
    }
}

.nut-input {
    border-radius: 99px;
    padding: 7px 12px;

    :deep(input) {
        color: black;
    }
}

.email-input {
    :deep(input) {
        color: #bfbfbf;
    }
}
</style>
